<template>
  <div ref="page" class="Page Confirm">
    <div class="Title">
      <h1 class="fl f18">订单确认</h1>
      <div class="clear"/>
    </div>
    <table class="GoodList">
      <tbody>
        <tr>
          <td colspan="3" class="teacher">讲师：{{ order.teacherName }}</td>
        </tr>
        <tr class="good">
          <td class="name First">
            <a :href="'/course/'+order.courseId" target="_blank">
              <img :src="order.courseCover">
            </a>
            <div class="goodInfo">
              <a :href="'/course/'+ order.courseId" target="_blank">{{ order.courseTitle }}</a>
            </div>
          </td>
          <td class="red priceNew Last">￥<strong>{{ order.totalFee }}</strong></td>
        </tr>
      </tbody>
    </table>
    <div class="Finish">
      <div class="check fr">
        <el-checkbox v-model="agree">我已阅读并同意<a href="javascript:" target="_blank">《谷粒学院购买协议》</a></el-checkbox>
      </div>
      <div class="clear"/>
      <div class="Main fl">
        <div class="fl">
          <a :href="'/course/'+order.courseId">返回课程详情页</a>
        </div>
      </div>
      <el-button :disabled="!agree" type="danger" @click="pay(1)">去支付</el-button>
      <div class="clear"/>
      <div />
    </div>
  </div>
</template>
<script>
import orderApi from '~/api/order'
export default {
  // 服务器端渲染方案：
  // 异步数据获取：在前端服务器端执行
  async asyncData(page) {
    var order = {
      teacherName: '',
      courseId: '',
      courseCover: '',
      courseTitle: '',
      totalFee: ''
    }
    const response = await orderApi.getById(page.route.params.id)
    order = response.data.tradeOrder
    return {
      order
    }
  },
  data() {
    return {
      agree: false,
      payForm: ''
    }
  },
  methods: {
    pay(type) {
      if (type === 1) {
        orderApi.aliPay(this.order.id).then(res => {
          document.querySelector('body').innerHTML = res.data.form // 查找到当前页面的body，将后台返回的form替换掉他的内容
          document.forms[0].submit() //  执行submit表单提交，让页面重定向，跳转到支付宝页面

          // this.$refs.page.empty
          // this.$refs.page.innerHTML = res.data.form
        })
      }
    }
  }
}
</script>
<style scoped>
  form{
    height: 500px;
  }
  input[type="hidden" i] {
    display: block;
  }
</style>
